<script setup>
defineOptions({ name: 'collectList' })
import { mineCollection } from '@/api/collect.js'
import { onMounted, ref } from 'vue'

onMounted(async () => flush())
const flush = async () => {
  resp.value = await mineCollection(page.value)
  console.log(resp.value)
  dataList.value.push(...resp.value.data.filter((item) => item.goods !== null))
}

const page = ref(1)
const resp = ref(false)
const dataList = ref([])

const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  page.value >= resp.value.meta?.pagination.total_pages
    ? (finished.value = true)
    : flush(([page.value, loading.value] = [page.value + 1, false]))
}
</script>

<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <collectItem
      v-for="item in dataList"
      :key="item.id"
      :data="item"
      @flush="flush"
    />
  </van-list>
</template>

<style lang="scss" scoped></style>
